<section [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div
		class="container mx-auto flex flex-col items-center px-4 py-16 text-center md:py-32 md:px-10 lg:px-32 xl:max-w-3xl"
	>
		<h1 class="text-4xl font-bold leading-none sm:text-5xl">
			Quisquam necessita vel
			<span class="" [ngClass]="['text' + primary]">laborum doloribus</span>
			delectus
		</h1>
		<p class="px-8 mt-8 mb-12 text-lg">
			Cupiditate minima voluptate temporibus quia? Architecto beatae esse ab amet vero eaque
			explicabo!
		</p>
		<div class="flex flex-wrap justify-center">
			<button
				class="px-8 py-3 m-2 text-lg font-semibold rounded"
				[ngClass]="['bg' + primary, 'text' + contrast]"
			>
				Get started
			</button>

			<button
				class="px-8 py-3 m-2 text-lg border rounded"
				[ngClass]="['text' + contrastInv, 'border' + neutral]"
			>
				Learn more
			</button>
		</div>
	</div>
</section>
